思考: Scrapboxで選択した行のテロメアを取得する
選択した行のテロメアを取得したい、できると思うんだけど探し方がわからない(2020/02/05) 一行だけなら出来た(2020/02/17)
一応できた(2020/02/18)
良い方法かはわからないが、多少使えている(2020/11/21)
Scrapboxに書き込んだ時、「いつやったか」をテロメアだけで把握しようとすると、気になる点があった 何を以て誤操作と見なすのかを判断するのは難しそうなので、これは仕方ない?
undo(ctrl + z)でテロメアも戻ると一番いい気がする… ポップアップさせないと日付が見えない
書き込んだその時に日付を残しておくのが一番いい
が、直接書くのは面倒くさい…
alt + t(Macはctrl + t)は今のタイムスタンプで挿入される 後で日付を挿入する時には、これだと使えない
選択した行のテロメアを無理やり本文中に挿入できるようにするのは、結構良い方法?
か、どうかはわからない
挿入したらテロメアは変わる…
挿入しようとして誤操作すると変更前のテロメアは失われる…
気分で使ったり使わなかったりするので良いかどうかは微妙
行数(配列のindex、タイトル行が0)
更新日時updated
code:scrapbox.Page.lines.json
0: {id: "5e3a5dd264728c0017810122", text: "選択した行のテロメアを取得したい",
userId: "5d80758fc76dbb0017f45820", created: 1580883411, updated: 1580883411, …}
1: {id: "5e3a5dd2f45820000025fed1", text: "選択した行のテロメアを取得したい",
userId: "5d80758fc76dbb0017f45820", created: 1580883411, updated: 1580883411, …}
2: {id: "5e3a5dd2f45820000025fed2", text: "できると思うんだけど探し方がわからない", userId: "5d80758fc76dbb0017f45820", created: 1580883411, updated: 1580883418, …}
2. 選択した行
map関数の引数(text, index)(選択した最初の行が0)
3. カーソルが今どこにあるか
最初は1. と2. のtextで一致させれば良いと思ったが、同じ文言だったら正しく一致させられない
以下の流れで取得する
まず3. のカーソル行の要素を取得
次に1. の配列の中で3. が何番目に出てくるか走査
一行だけならここで一致した1. のデータからupdatedを取得で完了
何番目の要素かわかったら2. の選択した行にあわせて3. を加減して1. のデータを取得
選択の仕方によってカーソルの現在位置が変わるので場合分け
上から下にテキストを選択した場合
カーソルが一番下(=2. の選択した残りの行がそれより前)にある
下から上にテキストを選択した場合
カーソルが一番上(=2. の選択した残りの行がそれより後)にある
選択範囲のtextは取得できるが、そのテキスト(のIDから)テロメアを引っ張ってくるにはどうすればいい?
code:sample.html
<div class="line section-1 permalink" id="L5df70edaf4582000001xxxxx">
<div class="telomere desktop-telomere">
<a href="#5df70edaf4582000001xxxxx"
class="telomere-border" tabindex="-1"
style="border-width: 0px 0px 0px 10px; width: auto;">
<div class="description">
<span class="date-label relative"
title="2019/12/16 15:59:16">
11 minutes ago
</span> (updated)
</div>
</a>
</div>
<span class="text">
<span>
<span>
<span class="indent-mark" style="width: 1.5em;">
<span class="c-0">
<span class="pad"> </span>
</span>
<span class="dot">
</span>
</span>
<span class="indent" style="margin-left: 1.5em;">
<span class="c-1">選</span>
<span class="c-2">択</span>
<span class="c-3">し</span>
<span class="c-4">た</span>
(略)
</span>
</span>
</span>
</span>
</div>